<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DeathGhost-登录</title>
<meta name="keywords" content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发" />
<meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!" />
<meta name="author" content="DeathGhost"/>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqpublic.js"></script>
<!--
Author: DeathGhost
Author URI: http://www.deathghost.cn
-->
</head>
<body>
<header>
 <section class="Topmenubg">
  <div class="Topnav">
   <div class="LeftNav">
    <a href="<%=path %>/login/toRegister">注册</a>/<a href="${pageContext.request.contextPath }/login/login">登录</a>&nbsp;&nbsp;<a href="<%=path %>/shop/selectShop">首页</a>
   </div>
   <div class="RightNav">
    <a href="<%=path %>/user/toUser">用户中心</a> <a href="user_orderlist.html" target="_blank" title="我的订单">我的订单</a> <a href="cart.html">购物车（0）</a> <a href="user_favorites.html" target="_blank" title="我的收藏">我的收藏</a> <a href="<%=path %>/login/toRegisterBuss">商家入驻</a>
   </div>
  </div>
 </section>
 <div class="Logo_search">
  <div class="Logo">
   <img src="images/logo.jpg" title="DeathGhost" alt="模板">
   <i></i>
  </div>
 </div>
 <nav class="menu_bg">
  <ul class="menu">
   <li><a href="index.html">首页</a></li>
   <li><a href="list.html">订餐</a></li>
   <li><a href="category.html">积分商城</a></li>
   <li><a href="article_read.html">关于我们</a></li>
  </ul>
 </nav>
</header>
<!--Start content-->
	<section class="Psection MT20">
	<form action="user_center.html" method="post">
		<table class="login">
			<tr>
				<td width="40%" align="right" class="FontW">账号：</td>
				<td><input type="text" name="name" id="name"
					placeholder="请输入用户名"></td>
			</tr>
			<tr>
				<td width="40%" align="right" class="FontW">密码：</td>
				<td><input type="password" name="pwd" id="pwd"
					placeholder="请输入密码"></td>
			</tr>
			<tr>
			<td width="40%" align="right" class="FontW">角色：</td>
				<td><label><select name="role" id="role">
							<option value="admin">管理员</option>
							<option value="bussiness">商户</option>
							<option value="user" selected="selected">用户</option>

					</select> </label></td>
			</tr>
			<tr>
			<td class="FontW" width="40%" align="right">验证码</td>
			<!--  <span class="web-form-span " >验证码</span> style="width: 30%;float: initial; margin-left: 27%;"-->
			 <td><input  type="text" class=" web-form-input " required="required" id="Yzm"  onblur="validate()">
			 <input type = "button" id="code"  value="点我验证" class="btn-list-btn" style="margin:0;float: right;width:20%" onclick="createCode()"/>
			</td>
			</tr>
			<tr>
				<td width="40%" align="right"></td>
				<td><input type="button" name="" value="登 录" class="button"
					onclick="login()"> 没有账号?<a href="<%=path %>/login/toRegister">立即注册 →</a></td>
					 
			</tr>
		</table>
	</form>
	<script type="text/javascript">
	function login(){
		document.getElementById("Yzm").addEventListener("change",validate);
        var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写
		if(inputCode == code){
		var name = $("#name").val();
		var pwd = $("#pwd").val();
		var role=$("#role").val();
		$.ajax({
			url:"${pageContext.request.contextPath }/login/login",
			data:{
				name:name,
				pwd:pwd,
				role:role
			},
			dataType:"json",
			success:function(data){
				alert(data.msg),
				window.location.href="${pageContext.request.contextPath}/"+data.url;
				
			}
		})
		}
		else{
			 alert("请输入验证码！"); //则弹出请输入验证码
		}
		}
	var code ; //在全局定义验证码
    //产生验证码
    function createCode(){
        code = "";
        var codeLength = 4;//验证码的长度
        var checkCode = document.getElementById("code");
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');//随机数
        for(var i = 0; i < codeLength; i++) {//循环操作
            var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
            code += random[index];//根据索引取得随机数加到code上
        }
        checkCode.value = code;//把code值赋给验证码
    }
   
 
    function validate(){
    	 //校验验证码
        document.getElementById("Yzm").addEventListener("change",validate);
        var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写
        if(inputCode.length <= 0) { //若输入的验证码长度为0
            alert("请输入验证码！"); //则弹出请输入验证码
            //$("#Yzm").focus();
            YZM = false;
        }
        else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
            alert("验证码输入错误！@_@"); //则弹出验证码输入错误
            createCode();//刷新验证码
            //$("#Yzm").val("");//清空文本框
            //$("#Yzm").focus();//重新聚焦验证码框
            YZM = false;
        }
        else { //输入正确时
            $("#Yzm").blur();//绑定验证码输入正确时要做的事
            YZM = true;
 
        }
    };

	</script> </section>
</body>
</html>
